<template>
  <div class="sidebar" id="sidebar">
    <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      background-color="#fff" text-color="#333" router active-text-color="#3161ff" :unique-opened="true"
      :default-openeds="openeds" :collapse-transition="true">
      <div v-for="(item, index) in menuItems" :key="index">
        <el-submenu v-if="item.children" :name="index" :index="String(index)">
          <template slot="title">
            <span>{{item.text}}</span>
          </template>
          <el-menu-item-group v-for="(subItem, i) in item.children" :key="index + i">
            <el-menu-item :index="subItem.name">{{subItem.text}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item v-else :name="item.name" :index="item.name">
          <span slot="title">{{item.text}}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'ycMenu',
  data () {
    return {
      openeds: []
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      //  console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      //  console.log(key, keyPath)
    }
  },
  computed: {
    // 菜单栏
    menuItems () {
      return this.$store.state.menuItems
    },
    //  获取当前路由渲染页面菜单
    defaultActive () {
      let pathLength = this.$route.path.slice(1).split('/')[0]
      if (pathLength === 'index') {
        let path = this.$route.path.split('/').reverse()[0]
        return path
      } else if (pathLength === 'prolist') {
        let path = 'prolist'
        return path
      } else if (pathLength === 'prodetail') {
        let path = 'prodetail'
        return path
      } else if (pathLength === 'authcode') {
        let path = 'authcode'
        return path
      } else if (pathLength === 'authcodedetail') {
        let path = 'authcode'
        return path
      }
    }
  }
}
</script>

<style scoped>
.sidebar {
  width: 96%;
  background-color: #FFFFFF;
  float: left;
  height: 100%;
}

#sidebar .el-menu {
  border-right: none;
}
</style>
